<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="财务录账-支"></my-header>
		
		<view class="main-body">
			<u-form :model="form" ref="uForm">
				<!--所属账本-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="所属账本：" prop="accountBook">
							<u-input v-show="zhangbenInput" v-model="form.accountBook" />
							<u-input v-show="zhangbenInput" v-model="form.accountBook2" />
							<xfl-select 
							:list="zhangbenlist"
							:clearable="false"
							:showItemNum="5" 
							:listShow="false"
							:isCanInput="true"  
							:style_Container="listBoxStyle"
							:placeholder = "'placeholder'"
							:initValue="'选择账本'"
							:selectHideType="'independent'"
							@change="zhangbenChange"
							>
							</xfl-select>
						</u-form-item>
					</view>
				</view>
				<!--财务项目-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="财务项目：" prop="cost">
							<u-input v-show="feiyongInput" v-model="form.cost" />
							<u-input v-show="feiyongInput" v-model="form.cost2" />
							<xfl-select 
							:list="feiyonglist"
							:clearable="false"
							:showItemNum="5" 
							:listShow="false"
							:isCanInput="true"  
							:style_Container="listBoxStyle"
							:placeholder = "'placeholder'"
							:initValue="'选择财务项目'"
							:selectHideType="'independent'"
							@change="feiyongChange"
							>
							</xfl-select>
						</u-form-item>
					</view>
				</view>
				<!--费用明细-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="费用明细：" prop="reimbursement">
							<u-input v-show="baoxiaoInput" v-model="form.reimbursement" />
							<u-input v-show="baoxiaoInput" v-model="form.reimbursement2" />
							<xfl-select 
							:list="baoxiaoList"
							:clearable="false"
							:showItemNum="5" 
							:listShow="false"
							:isCanInput="true"  
							:style_Container="listBoxStyle"
							:placeholder = "'placeholder'"
							:initValue="'选择费用明细'"
							:selectHideType="'independent'"
							@change="baoxiaoChange"
							>
							</xfl-select>
						</u-form-item>
					</view>
				</view>
				<!--金额-->
				<view class="dis_flex ali-ite">
					<view>
						<u-form-item :required="true" label-width="70px" label="金额：" prop="money">
							<u-input placeholder=" " v-model="form.money" :clearable="false" :custom-style="moneyStyle" input-align="center"/>
						</u-form-item>
					</view>
				</view>
				<!--费用说明-->
				<view>
					<view>
						<u-form-item :required="true" label-width="70px" label="费用说明：" prop="explain">
							<u-input placeholder="对支出情况做出详细说明" placeholder-style="font-size:11px;" v-model="form.explain" :clearable="false" :custom-style="shuomingStyle" />
						</u-form-item>
					</view>
				</view>
				<!--上传报销收入凭证-->
				<view>
					<view>
						<u-form-item :required="true" label-width="120px" label="上传报销收入凭证：">
						</u-form-item>
					</view>
					<u-upload ref="uUpload" :action="action" :auto-upload="true" name="image" max-count="6" width="180" height="180" :max-size="2 * 1024 * 1024"></u-upload>
					<!-- <mk-upload 
						:imgList="imgList"
						@onDelete="onDelete"
						@onChoose="onChoose"
					 /> -->
				</view>
				
			</u-form>
			
			<view class="address" style="margin:30rpx 0 0rpx 0;">
				<button @click="cancel()" type="warn">取消报销</button>
				<button @click="sub()" style="background:#0051BA" type="primary" >提交报销</button>
			</view>
			<view style="margin-top:20px;">
				<text style="color:red;">温馨提示：红色星为必填项，</text>
				<text style="color:#0051BA;">蓝色星为选填项</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	import mkUpload from "@/components/mk-upload/mk-upload.vue"
	export default {
		data() {
			return {
				type: 'textarea',
				userInfo : uni.getStorageSync('userInfo') ,// 获取用户信息
				onClick : false,
				action: 'https://test.0871.cn/upload/uploadfile_new',
				numberShow : false,
				shuomingStyle : {
					minWidth:'300rpx',
					borderBottom:'1px solid #ccc',
					minHeight:'30px',
				},
				moneyStyle : {
					width:'90px',
					borderBottom:'1px solid #ccc',
					// borderRadius: '8px',
					minHeight:'30px',
				},
				form:{
					accountBook : '',
					cost : '',
					reimbursement : '',
					accountBook2 : '',
					cost2 : '',
					reimbursement2 : '',
					money : '',
					explain : '',
				},
				rules: {
					// 费用说明
					explain: [
						{
							required: true,
							message: '请填写费用说明！',
							trigger: ['blur', 'change']
						}
					],
					// 报销项目
					money: [
						{
							required: true,
							message: '请填写金额！',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.amount(value);
							},
							message: '请填写正确的金额！',
							trigger: ['change','blur'],
						}
					],
					// 报销项目
					reimbursement: [
						{
							required: true,
							message: '请选择报销项目！',
							trigger: ['blur', 'change']
						}
					],
					// 费用
					cost: [
						{
							required: true,
							message: '请选择费用项目！',
							trigger: ['blur', 'change']
						}
					],
					// 账本
					accountBook: [
						{
							required: true,
							message: '请选择账本！',
							trigger: ['blur', 'change']
						}
					],
				},
				images : [],
				imgList: [],
				baoxiaoInput  : false,
				feiyongInput  : false,
				zhangbenInput : false,
				background	: {
					backgroundColor: ' ',
				},
				mode: 'range' ,
				listBoxStyle: `height: 25px; font-size: 11px;`,
				zhangbenlist: [
					{value:'乐山市',type:1},
					{value:'眉山市',type:2},
					{value:'海口市',type:3},
					{value:'小怪线充项目',type:4},
					{value:'桩柜产销项目',type:5},
					{value:'公司',type:6},
				],
				feiyonglist: [
					{value:'税费',type:1},
					{value:'社保（公司承担部分）',type:2},
					{value:'公积金（公司承担部分）',type:3},
					{value:'商户分成',type:4},
					{value:'员工工资',type:5},
					{value:'办公费用',type:6},
					{value:'滞纳金',type:7},
					{value:'怪兽充电设备采购',type:8},
					{value:'小怪线充采购',type:9},
					{value:'小怪线充商家提现',type:10},
					{value:'小怪线充代理商提现',type:11},
					{value:'其他',type:12},
				],
				baoxiaoList: [
					{value:'餐饮费',type:1},
					{value:'住宿费',type:2},
					{value:'公司物料费',type:3},
					{value:'油费',type:4},
					{value:'物流费',type:5},
					{value:'其他',type:6},
				],
			}
		},
		methods:{
			//删除图片功能
			// onDelete(index){
			// 	console.log(index)
			// 	uni.showLoading({
			// 		title: '删除中'
			// 	});
			// 	setTimeout(()=>{
			// 		this.imgList.splice(index, 1);
			// 		wx.showToast({
			// 			title: '删除成功',
			// 			icon: 'success',
			// 			duration: 1000
			// 		});
			// 	}, 1000);
			// },
			// //图片上传并生成返回服务器地址
			// onChoose(e){
			// 	uni.showLoading({
			// 		title: '上传中'
			// 	});
			// 	setTimeout(()=>{
			// 		const tempFilePaths = e.tempFilePaths;
			// 		this.imgList.push(tempFilePaths[0]);
			// 		uni.uploadFile({
			// 			url: "https://oa.two.congzhu.com/upload/uploadfile",
			// 			filePath: tempFilePaths[0],
			// 			name: 'image',
			// 			success: (uploadFileRes) => {
			// 				let data = JSON.parse(uploadFileRes.data);
			// 				console.log(data)
			// 				this.images.push(data.path);
			// 			}
			// 		});
			// 	}, 1000);
			// 	uni.hideLoading(); 
			// },
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.form.money += val;
				console.log(val);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.form.money.length) this.form.money = this.form.money.substr(0, this.form.money.length - 1);
				console.log(this.money);
			},
			// 提交事件
			sub:function(){
				if(this.onClick)
				{
					wx.showToast({
						title: '请勿重复提交',
						icon: 'none',
					});
					return false
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 获取上传的照片，赋值给图片数组
						let files = [];
						files = this.$refs.uUpload.lists.filter(val => {
							return val.progress == 100;
						})
						this.images = [];
						for(let i=0; i<files.length;i++)
						{
							this.images.push(files[i].response.path);
						}
						// 判断至少有一张图片
						if( this.images.length <= 0 )
						{
							wx.showToast({
								title: '请至少上传1张图片！',
								icon: 'none',
								duration: 1000
							});
							return false
						}
						this.$api.finance_addExpenditure({
							accountBook   : this.form.accountBook2 ,
							cost		  : this.form.cost2 ,
							reimbursement : this.form.reimbursement2 ,
							money 	: this.form.money ,
							explain : this.form.explain ,
							images 	: this.images ,
							u_id    : this.userInfo.id ,
						},(res)=>{
							if(res.code==200)
							{
								// 禁止重复点击
								this.onClick = true ;
								wx.showToast({
									title: res.message+'，正在为您跳转',
									icon: 'none',
									duration: 2000, 
									success: function () {
									  setTimeout(function() {
										wx.navigateTo({
											url: '/pages/finance/index/finance-home',
										})
									  }, 2000);
									}
								});
							}else{
								wx.showToast({
									title: res.message,
									icon: 'none',
									duration: 2000, 
								});
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			// 账本点击事件
			zhangbenChange(e){
				this.form.accountBook = e.orignItem.value ;
				this.form.accountBook2 = e.orignItem.type ;
				console.log(e)
			},
			// 费用项目点击事件
			feiyongChange(e){
				this.form.cost = e.orignItem.value ;
				this.form.cost2 = e.orignItem.type ;
				console.log(e)
			},
			// 报销点击事件
			baoxiaoChange(e){
				this.form.reimbursement = e.orignItem.value ;
				this.form.reimbursement2 = e.orignItem.type ;
				console.log(e)
			},
		},
		// 下拉改变头部背景色
		onPageScroll(res) {
			if( res.scrollTop > 0 )
			{
				this.background.backgroundColor = '#005687';
			}else{
				this.background.backgroundColor = ' ';
			}
		},
		//页面除此渲染完成
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.load();
			this.load_close();
		},
		components:{
			myHeader,
			mkUpload,
		}
	}
</script>

<style>
	.address-xx{
		margin-top:20rpx;
		border:1rpx solid #ccc;
		width:610rpx;
		height:150rpx;
		padding-left:20rpx;
	}
	.address{
		display:flex;
		align-items: center;
		justify-content: space-between;
		margin-top:10rpx;
	}
	.address button{
		font-size:13px;
		width:140px;
		border-radius: 20px;
	}
	.address h2{
		width:180rpx;
		text-align:center;
		border:1rpx solid #ccc;
		padding:10rpx 0 10rpx 0;
	}
	.main-body{
		padding:10px 20px 30px 20px;
		border-radius: 8px;
		border: 1px solid #ccc;
		background:#fff;
	}
	.main{
		padding:20px;
		min-height:100vh;
		background-image: linear-gradient( #005687, #E4E4E5 );
	}
</style>
